<template>
  <div >
    <div>
      <span class="span-title">智小递电话代接</span>
      <mt-navbar>
        <mt-tab-item id="1">
          <el-card class="box-card">
            <div class="font-num-text item">
              1
            </div>
            <div class="text item">
              今日排名
            </div>
          </el-card>
        </mt-tab-item>
        <mt-tab-item id="2">
          <el-card class="box-card">
            <div class="font-num-text item">
              7
            </div>
            <div class="text item">
              7天内排名
            </div>
          </el-card>
        </mt-tab-item>
        <mt-tab-item id="3">
          <el-card class="box-card">
            <div class="font-num-text item">
              17
            </div>
            <div class="text item">
              自定义日期排名
            </div>
          </el-card>
        </mt-tab-item>
      </mt-navbar>
    </div>
    <div>
      <span class="span-title">个人接听</span>
      <span class="span-icon-text"> <i class="el-icon-warning-outline"></i>仅支持统计工业手机卡用户</span>
      <mt-navbar>
        <mt-tab-item id="1">
          <el-card class="box-card">
            <div class="font-num-text item">
              1
            </div>
            <div class="text item">
              今日排名
            </div>
          </el-card>
        </mt-tab-item>
        <mt-tab-item id="2">
          <el-card class="box-card">
            <div class="font-num-text item">
              7
            </div>
            <div class="text item">
              7天内排名
            </div>
          </el-card>
        </mt-tab-item>
        <mt-tab-item id="3">
          <el-card class="box-card">
            <div class="font-num-text item">
              17
            </div>
            <div class="text item">
              自定义日期排名
            </div>
          </el-card>
        </mt-tab-item>
      </mt-navbar>
    </div>
    <div>
      <span class="span-title">智小递短信充值</span>
      <mt-navbar>
        <mt-tab-item id="1">
          <el-card class="box-card">
            <div class="font-num-text item">
              1
            </div>
            <div class="text item">
              今日排名
            </div>
          </el-card>
        </mt-tab-item>
        <mt-tab-item id="2">
          <el-card class="box-card">
            <div class="font-num-text item">
              7
            </div>
            <div class="text item">
              7天内排名
            </div>
          </el-card>
        </mt-tab-item>
        <mt-tab-item id="3">
          <el-card class="box-card">
            <div class="font-num-text item">
              17
            </div>
            <div class="text item">
              自定义日期排名
            </div>
          </el-card>
        </mt-tab-item>
      </mt-navbar>
    </div>
    <div>
      <span class="span-title">智小递短信使用</span>
      <mt-navbar>
        <mt-tab-item id="1">
          <el-card class="box-card">
            <div class="font-num-text" @click="clickShowDetail()">
              <CircleProcess :myNum="this.myNum"></CircleProcess>
            </div>
            <!-- <div class="text item">
              短信已使用
            </div> -->
          </el-card>
        </mt-tab-item>
        <mt-tab-item id="2">
          <el-card class="box-card">
            <div class="font-num-text item">
              7
            </div>
            <div class="text item">
              7天内排名
            </div>
          </el-card>
        </mt-tab-item>
        <mt-tab-item id="3">
          <el-card class="box-card">
            <div class="font-num-text item">
              1
            </div>
            <div class="text item">
              自定义日期排名
            </div>
          </el-card>
        </mt-tab-item>
      </mt-navbar>
    </div>
  </div>
</template>

<script>
// Header, Button, 
import { Navbar, TabItem } from 'mint-ui'
import CircleProcess from "./CircleProcess"

export default {
  name: 'MyRanking',
  components: {
    // Header,
    // Button,
    Navbar,
    TabItem,
    CircleProcess,
  },
  data () {
    return {
      myNum:[30,70],
      thisUrl: "http://localhost:8080/#/",
      nextUrl: "https://www.baidu.com/",
      userId: 2,
    }
  },
  created(){
    this.getParam()
  },
  methods:{
    getParam(){
      this.thisUrl = this.$route.query.thisUrl;
      this.nextUrl = this.$route.query.nextUrl;
      this.userId = this.$route.query.userId;
    },
    clickShowDetail(){
      // const showDetail = document.getElementById("showDetail")
      // showDetail.onclick(function(){
      //   alert("【"+this.userId+"】，【"+this.thisUrl+"】，【"+this.nextUrl+"】")
      //   window.location.href=this.nextUrl;
      // })
      alert("【"+this.userId+"】，【"+this.thisUrl+"】，【"+this.nextUrl+"】")
      window.location.href=this.nextUrl;
    },
    toBeforePage(){
      alert("【"+this.userId+"】，【"+this.thisUrl+"】，【"+this.nextUrl+"】")
      window.location.href=this.thisUrl;
    },
    
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  
  .text {
    font-size: 10px;
  }

  .item {
    padding: 10px 0;
  }

  .box-card {
    width: 100%;
  }

  .span-title {
    font-size: 15px;
    font-weight:bold;
    padding-left: 1%;
  }

  .font-num-text {
    font-size: 20px;
    font-weight:bold;
  }

  .head-bottom {
    margin-bottom: 10px;
  }

  .span-icon-text {
    font-size: 8px;
    text-align: right;
  }
</style>
